
.app-advert{
    height: 100%;
    display: flex;
    flex-direction: column;
    .title{
        height: 44px;
        text-align: center;
        line-height: 44px;
    }

    .main{
        flex: 1;
        background: url('../imgs/advertisement-bg.jpg') no-repeat center;
        background-size: cover; 
        position: relative;

        .text{
            width: 100%;
            text-transform: uppercase; /* 转为大写 */
            font-size: 48px;
            color: #fff;
            font-weight: bold;
            text-align: center;
            position: absolute;
            bottom: 150px;

            animation: move 3s ease-in-out forwards;
        }

        .countdown{
            width: 105px; 
            height: 40px;
            background-color: #fff;
            border-radius: 20px;
            position: absolute;
            right: 14px;
            top: 28px;
            line-height: 40px;
            text-align: center;
        }
    }

}

@keyframes move {
    0%{
        font-size: 0;
        opacity: 0;
    }
    35%{
        font-size: 20px;
        opacity: .3;
        bottom: 200px;
    }
    75%{
        font-size: 48px;
        opacity: 1;
        bottom: 60px;
    }
    100%{
        font-size: 48px;
        opacity: 1;
        bottom: 60px;
    }
}
